<template>
    <div class="container" v-if="pageflag">
        <div class="contents">
            <!-- 综合统计 -->
            <div class="contetn_left">
                <div class="contetn_left_title">省域地图</div>
<!--                <LeftTop :child-message="provinceStatData" v-if="provinceStatData"/>-->
                <CenterMap class="contetn_center_top" />
<!--                <MuseumsList />-->
            </div>
            <!-- 地图 -->
<!--            <div class="contetn_center">-->
<!--                <CenterMap class="contetn_center_top" />-->
<!--            </div>-->
            <!-- 排行榜 -->
            <div class="contetn_right">
                <div class="contetn_left-bottom contetn_lr-item" title="年客流数据">
                    <div class="contetn_right_title">年客流数据</div>
<!--                    <RightTop class="mrt" :child-message="provinceStatData.rankingData" v-if="provinceStatData" />-->
                    <CenterBottomYear />
                </div>
                <div class="contetn_left-bottom contetn_lr-item" title="月客流数据">
                    <div class="contetn_right_title2">月客流数据</div>
<!--                    <RightTop class="mrt" :child-message="provinceStatData.rankingData" v-if="provinceStatData" />-->
                    <CenterBottomMonth :child-message="calendarData" />
                </div>
            </div>
        </div>
        <!-- 日客流数据 -->
        <div class="footer">
            <div class="contetn_center-bottom">
                <div class="contetn_left_title">日客流数据</div>
                <CenterBottom />
            </div>
        </div>
    </div>
    <Reacquire v-else @onclick="getData" line-height="1000px">
        重新获取
    </Reacquire>
</template>

<script>
// import LeftTop from './left-top.vue'
import CenterMap from "./center-map.vue";
import CenterBottom from "./center-bottom.vue";
import CenterBottomYear from "./center-bottom-year.vue";
import CenterBottomMonth from "./center-bottom-month.vue";
import MuseumsList from "./museumsList.vue";
// import RightTop from "./right-top.vue";
import {currentGET} from "api";
import {Message} from "element-ui";

export default {
  components: {
    // LeftTop,
    CenterMap,
    // RightTop,
    CenterBottom,
    CenterBottomYear,
    CenterBottomMonth,
    MuseumsList,
  },
  data() {
    return {
        loading: true,
        pageflag: true,
        provinceStatData: null,
        calendarData: [],
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
      window.localStorage.clear()
      let end = setInterval(function () { }, 100);
      for (let i = 1; i <= end; i++) {
          clearInterval(i);
      }
      this.getData();
  },

  mounted() {},
  methods: {
      async getData() {
          this.loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
          });
          // currentGET("provinceStat", {})
          //     .then((res) => {
          //         if (res.success) {
          //             this.provinceStatData = res.data;
          //         } else {
          //             this.pageflag = false;
          //             this.museumStatData = [];
          //             // this.$Message({
          //             //     text: res.msg,
          //             //     type: "warning",
          //             // });
          //         }
          //     })
          //     .catch((e) => {
          //         this.pageflag = false;
          //         console.log(e, "error");
          //     })
          //     .finally(() => {
          //         this.loading.close();
          //     });


          const currentMonth = this.getCurrentMonth();
          this.getProvCalendarYear(currentMonth);

          this.loading.close();
      },
      // 获取月客流数据
      async getProvCalendarYear(currentMonth) {
          console.log(currentMonth, "currentMonth");
          const res = await currentGET("getProvCalendarYear", {yearMonth: currentMonth})
          if (res.success) {
              if (res.data.length === 0) {
                  Message({
                      duration: 2000,
                      showClose: true,
                      message: "暂无数据",
                      type: 'warning'
                  });
              }

              this.getAllDatesCurrentMonth(currentMonth);

              this.calendarData = res.data;
              this.calendarData.forEach(item => {
                  item.allocationSum = 1;
              })
              console.log(JSON.parse(JSON.stringify(this.calendarData)), "this.calendarData");
          } else {
              this.pageflag = false;
              this.calendarData = [];
          }
      },
      // 获取指定月份所有的日期
      getAllDatesCurrentMonth(val) {
          const currentDate = new Date(val);
          const year = currentDate.getFullYear();
          const month = currentDate.getMonth();

          const firstDayOfMonth = new Date(year, month, 1);
          const lastDayOfMonth = new Date(year, month + 1, 0);

          const dates = [];
          for (let day = firstDayOfMonth.getDate(); day <= lastDayOfMonth.getDate(); day++) {
              const formattedDate = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
              dates.push(formattedDate);
          }

          console.log(dates,"getAllDatesCurrentMonth");
      },
      getProvDay() {
          currentGET("getProvDay", {})
              .then((res) => {
                  if (res.success) {
                      this.ProvDayData = res.data;
                      console.log(this.ProvDayData, 'this.ProvDayData');

                      let hours = ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'];

                      let result = hours.map((hour) => {
                          let obj = this.ProvDayData.find(function(item) {
                              return item.hour === hour;
                          });

                          if (obj) {
                              return obj.value;
                          } else {
                              return 0;
                          }
                      });

                      console.log(result, "result");

                      this.options.series[0].data = result
                      this.options2.series[0].data = result
                  } else {
                      this.pageflag = false;
                      // this.$Message({
                      //     text: res.msg,
                      //     type: "warning",
                      // });
                  }
              })
              .catch((e) => {
                  // this.pageflag = false;
                  console.log(e, "error");
              })
              .finally(() => {
              });
      },
      // 获取当前月份
      getCurrentMonth() {
          const currentDate = new Date(); // 获取当前日期对象
          const year = currentDate.getFullYear(); // 获取当前年份
          const month = currentDate.getMonth() + 1; // 获取当前月份（注意月份从 0 开始，所以要加 1）

          const formattedMonth = `${year}-${String(month).padStart(2, '0')}`; // 格式化月份为 "YYYY-MM"

          return formattedMonth;
      }
  },
};
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    //justify-content: space-between;
    min-height: calc(100% - 60px);
    //margin-top: 16px;
}

.contetn_left_title {
    width: 446px;
    height: 38px;
    padding-left: 36px;
    line-height: 38px;
    font-size: 18px;
    color: #fcfbff;
    //background-image: url("../../assets/img/left-title.png");
    background-image: url("../../assets/img/bottom3.webp"), url("../../assets/img/left-title.webp");
    background-size: cover;
    background-position: 25%;
}

.contetn_right_title {
    width: 446px;
    height: 38px;
    padding-right: 36px;
    line-height: 38px;
    font-size: 18px;
    text-align: right;
    color: #fcfbff;
    //background-image: url("../../assets/img/right-title.png");
    background-image: url("../../assets/img/bottom3.webp"), url("../../assets/img/right-title.webp");
    background-size: cover;
    background-position: 100%;
}

.contetn_right_title2 {
    width: 446px;
    height: 38px;
    margin-top: 10px;
    padding-right: 36px;
    line-height: 38px;
    font-size: 18px;
    text-align: right;
    color: #fcfbff;
    //background-image: url("../../assets/img/right-title.png");
    background-image: url("../../assets/img/bottom3.webp"), url("../../assets/img/right-title.webp");
    background-size: cover;
    background-position: 100%;
}

// 内容
.contents {
  .contetn_left,
  .contetn_right {
    width: 945px;
    box-sizing: border-box;
    // padding: 16px 0;
  }

  .contetn_center {
      flex: 1;
      height: 100%;
    //width: 720px;
  }
  //左右两侧 三个块
  .contetn_lr-item {
    //height: 710px;
  }

  .contetn_center_top {
    width: 100%;
  }

  // 中间
  .contetn_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    //justify-content: space-around;
    position: relative;
  }

    .contetn_left-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .mrt{
            margin-right: 12px;
        }
    }
}

.footer{
    .contetn_center-bottom {
        height: 340px;
    }
}


@keyframes rotating {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
    50% {
        -webkit-transform: rotate(180deg) scale(1.1);
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}
</style>
